<template>
    <div class="digitalMan">
        <div class="digitalMan-top">
            <div class="digitalMan-top-l">
                <div class="digitalMan-top-l-title wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">
                    易播数字人
                </div>
                <div class="digitalMan-top-l-setails wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">
                    <div>数字人直播先行者</div>
                    <div>直播带货+企业留资+本地生活</div>
                </div>
                <div class="digitalMan-top-l-consulting wow bounceInLeft flex_start" data-wow-delay=".3s" data-wow-duration="1.2s">
                    <vs-button @click="openInfoDialog" style="background: linear-gradient(311deg, #5F79FF 0%, #71EEFF 100%);
                    font-size: 18px;
                    padding: 6px 0;
                    width: 170px;
                    ">
                        咨询了解 <img style="margin-left:4px" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        <template #animate>
                            <img src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        </template>
                    </vs-button>
                    <div @click="nsDownload" class="flex_cen download"> 下载易播数字人（windows版） <i style="margin: 0 0 -3px -2px;" class="iconfont icon-yunduanxiazai" ></i></div>
                </div>
            </div>
        </div>
        <div class="digitalMan-content">
            <div class="digitalMan-content-advantages">
                <div class="head" >
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">产品核心优势</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">短视频+直播时代，AI数字人直播行业风向标</div>
                </div>
                <div class="digitalMan-content-advantages-list flex_cen">
                    <div class="digitalMan-content-advantages-list-item " v-for="(item,idx) of advantagesList" :key="idx">
                        <img :src="item.img" alt="">
                        <ul>
                            <li>{{ item.name }}</li>
                            <li v-html="item.details"></li>
                        </ul>
                    </div>
                </div>
                <div class="digitalMan-content-advantages-comments flex_cen">
                    <div class="digitalMan-content-advantages-comments-item flex_start" v-for="(item,idx) of advantagesCommentsList" :key="idx">
                        <div ><i class="iconfont icon-shi"></i></div>{{ item.name }}
                    </div>
                </div>
            </div>
            <div class="digitalMan-content-subversion">
                <div class="head ">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">颠覆传统真人直播</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">低成本打造AI数字人主播，提升300%的效率，节省超90%的时间和预算</div>
                </div>
                <div class="digitalMan-content-subversion-data">
                    <div class="digitalMan-content-subversion-data-l">
                        <div class="digitalMan-content-subversion-data-l-title">真人传统直播</div>
                        <div class="digitalMan-content-subversion-data-l-details flex_start">
                            <i class="el-icon-caret-right"></i>
                            <div>真人主播人力成本昂贵</div>
                        </div>
                        <div class="digitalMan-content-subversion-data-l-details flex_start">
                            <i class="el-icon-caret-right"></i>
                            <div>最多连续直播4-5小时</div>
                        </div>
                        <div class="digitalMan-content-subversion-data-l-details flex_start">
                            <i class="el-icon-caret-right"></i>
                            <div>需搭建场地、灯光、布景</div>
                        </div>
                        <div class="digitalMan-content-subversion-data-l-details flex_start">
                            <i class="el-icon-caret-right"></i>
                            <div>需专业直播团队操作</div>
                        </div>
                        <div class="digitalMan-content-subversion-data-l-details flex_start">
                            <i class="el-icon-caret-right"></i>
                            <div>直播节奏难以把控</div>
                        </div>
                    </div>
                    <div class="digitalMan-content-subversion-data-r">
                        <div class="digitalMan-content-subversion-data-r-title">数字人直播</div>
                        <div class="digitalMan-content-subversion-data-r-details flex_end">
                            <div>数字人主播零成本打造</div>
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="digitalMan-content-subversion-data-r-details flex_end">
                            <div>7*24小时随时随地开播</div>
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="digitalMan-content-subversion-data-r-details flex_end">
                            <div>仅需一台电脑，场景随意更换</div>
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="digitalMan-content-subversion-data-r-details flex_end">
                            <div>线上一次配置，轻松上手</div>
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="digitalMan-content-subversion-data-r-details flex_end">
                            <div>数字人多剧本多情绪演绎</div>
                            <i class="el-icon-caret-left"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="digitalMan-content-map">
                <div class="head ">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">AI数字人直播场景</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">多场景应用满足各行业客户需求，打开直播间流量增长新引擎</div>
                </div>
                <div class="digitalMan-content-map-data">
                    <div class="digitalMan-content-map-data-title">
                        <div class="digitalMan-content-map-data-title-text">{{industryName}}</div>
                        <div></div>
                    </div>
                    <div class="digitalMan-content-map-data-industry">
                        <div class="flex_bet flex_wrap digitalMan-content-map-data-industry-list">
                            <div class="digitalMan-content-map-data-industry-list-item"
                            v-for="(item,idx) of industryList" :key="idx"
                            @click="industryListClick(item,idx)"
                            @mouseover="industryListClick(item,idx)"
                            @mouseout ="onIndustryListIdxLeave(item,idx)"
                            > 
                                    <div 
                                    :class="{'industryListActive': industryListIdx == idx}"
                                    ><i :class="`iconfont ${item.icon}`"></i></div>
                                    <p>{{ item.name }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="digitalMan-content-map-data-img">
                        <img :src="industryBg" alt="">
                    </div>
                </div>
            </div>
            <div class="digitalMan-content-platform">
                <div class="head ">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">AI数字人直播平台</div>
                </div>
                <div class="digitalMan-content-platform-list flex_bet flex_wrap">
                    <div class="digitalMan-content-platform-list-item" v-for="(item,idx) of platformList" :key="idx">
                        <img :src="item" alt="">
                    </div>
                </div>
            </div>
        </div>
        <Footer type="2"></Footer>
        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
</template>
<script>
import  Footer from '@/components/footer/index.vue'
import  InfoDialog from '@/components/infoDialog'
export default {
    components:{Footer,InfoDialog},
    data() {
        return {
            advantagesList: [
                {
                    name: 'AI数字人直播',
                    img: 'https://static.pdwl.net/jituan/images/digitalMan/icon15.png',
                    details:'无需搭建场景</br>无需真人出镜</br>一台电脑搞定所有</br>7*24H不间断直播'

                },
                {
                    name: 'AI口播制作',
                    img: 'https://static.pdwl.net/jituan/images/digitalMan/icon16.png',
                    details:'1比1克隆真人形象</br>高还原度声音克隆</br>智能生成口播文案</br>快速筛选爆款文案'
                },
                {
                    name: 'AI脚本撰写',
                    img: 'https://static.pdwl.net/jituan/images/digitalMan/icon12.png',
                    details:'智能生成直播脚本</br>智能生成口播文案</br>结合短视频搜索算法</br>提升视频播放数量'

                },
                {
                    name: '定制形象克隆',
                    img: 'https://static.pdwl.net/jituan/images/digitalMan/icon7.png',
                    details:'真人形象 1:1 还原</br>真人声音 1:1克隆</br>超写实企业代言人</br>节省主播时间精力'

                },
            ],
            industryListIdx: 3,
            industryTime: null,
            industryName: '',
            industryBg : '',
            industryImg: '',
            industryList:[
            {
                    name: '企业服务行业',
                    icon: 'icon-kcb_hangyeicon-2',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon21.png'
                },
                {
                    name: '教育培训行业',
                    icon: 'icon-kcb_hangyeicon-3',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon22.png'

                },
                {
                    name: '本地生活行业',
                    icon: 'icon-kcb_hangyeicon-1',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon23.png'

                },
                {
                    name: '直播带货行业',
                    icon: 'icon-kcb_hangyeicon-',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon1.png'

                },
                {
                    name: '文旅宣传行业',
                    icon: 'icon-kcb_hangyeicon-5',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon24.png'

                },
                {
                    name: '传统制造行业',
                    icon: 'icon-kcb_hangyeicon-6',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon25.png'

                },
                {
                    name: '时尚美业行业',
                    icon: 'icon-kcb_hangyeicon-4',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon26.png'

                },
                {
                    name: '广电新闻行业',
                    icon: 'icon-24gl-newspapers2',
                    bg:'https://static.pdwl.net/jituan/images/digitalMan/icon27.png'

                },
            ],
            advantagesCommentsList:[
                {
                    name:'解决创作效率低',
                    state: false
                },
                {
                    name:'规避主播流失风险',
                    state: false
                },
                {
                    name:'打破主播起步难',
                    state: false
                },
                {
                    name:'节省团队综合成本',
                    state: false
                },
                {
                    name:'解决全时段直播难',
                    state: false
                },

            ],
            platformList:[
                'https://static.pdwl.net/jituan/images/digitalMan/icon6.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon2.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon8.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon3.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon9.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon5.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon10.png',
                'https://static.pdwl.net/jituan/images/digitalMan/icon4.png',
            ],
        }
    },
    beforeCreate(){
        let imgs = [
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon15.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon16.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon12.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon7.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon1.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon22.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon24.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon23.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon24.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon25.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon1.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon27.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon6.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon2.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon8.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon3.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon9.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon5.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon10.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon4.png",
            "https://static.pdwl.net/jituan/images/digitalMan/icon20.png",
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    mounted() {
        this.industryName = this.industryList[this.industryListIdx].name
        this.industryBg = this.industryList[this.industryListIdx].bg
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
        this.initIndustryListIdx()
    },
    methods:{
        nsDownload(){
            window.open('https://niushi.pindajituan.com/hi/yibo.exe')
        },
        openInfoDialog(){
            this.$refs.infoDialog.openInfoDialog()
        },
        industryListClick(item,idx){
            clearInterval(this.industryTime)
            this.industryListIdx = idx
            this.industryName = item.name
            this.industryBg = item.bg

        },
        onIndustryListIdxLeave(){
            this.initIndustryListIdx()
        },
        initIndustryListIdx(){
            this.industryTime = setInterval(()=>{
                if(this.industryListIdx == (this.industryList.length - 1)) this.industryListIdx = 0
                else this.industryListIdx +=1
                this.industryName = this.industryList[this.industryListIdx ].name
                this.industryBg = this.industryList[this.industryListIdx ].bg
            },1700)
        },
    }
}
</script>
<style lang="scss" scopde >
.digitalMan{
    .digitalMan-top {
        background-image: url('https://static.pdwl.net/jituan/images/digitalMan/icon11.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 720px;
        width: 100%;
        position: relative;

        &-l {
            position: absolute;
            left: 17%;
            top: 200px;

            &-title {
                font-size: 80px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            &-setails {
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                color: #FFFFFF;
                letter-spacing: 4px;
                margin-top: 40px;
                div:first-child{
                    font-size: 48px;
                    font-weight: 400;
                }
                div:last-child{
                    font-size: 24px;
                    margin-top: 5px;
                    font-weight: 300;
                }
            }

            &-consulting {
                margin-top: 80px;
                .download {
                    border: 1px solid;
                    border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
                    font-size: 14px;
                    background: #ffffff1a;
                    font-weight: 400;
                    color: #FFFFFF;
                    width: 220px;
                    height: 46px;
                    text-align: center;
                    cursor: pointer;
                    transition: all .3s;
                    margin-left: 30px;
                    &:hover {
                            transform: scale(1.1);
                        }
                }
            }
        }
    }
    .digitalMan-content{
        width: 100%;
        margin: 0 auto;
        &-advantages{
            width: 100%;
            &-list{
                // margin-bottom: 54px;
                margin-bottom: 30px;
                &-item{
                    width: 305px;
                    margin-right: 40px;
                    position: relative;
                    transition: all 0.3s;
                    overflow: hidden;
                    &:last-child{
                        margin-right: 0;
                    }
                    
                    img{
                        width: 303px;
                        height: 406px;
                        border: 1px solid;
                        margin-bottom: 52px;
                        border-image:linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);

                    }
                    ul{
                        position: absolute;
                        bottom: 0px;
                        margin-top: 52px;
                        cursor: pointer;
                        background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                        width: 100%;
                        height: 52px;
                        transition: all 0.3s;
                        li:first-child{
                            margin: 0;
                            width: 100%;
                            padding: 0;
                            height: 52px;
                            margin-top: -3px;
                            text-align: center;
                            background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                            font-size: 24px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 52px;
    
                        }
                        li:last-child{
                            line-height: 30px;
                            text-align: center;
                            font-weight: 300;
                            font-size: 16px;
                            margin-top: 15px;
    
                        }
                    }
                    &:hover{
                        ul{
                            height: 463px;
                            background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                            li{
                                display: flex;
                                justify-content: center;
                                margin-top: 40%;
                            }
                            li:first-child{
                                font-size: 32px;
                                font-weight: 500;
                            }
                            li:last-child{
                                line-height: 30px;
                                text-align: center;
                                font-weight: 400;
                                font-size: 16px;
                                margin-top: 15px;
                            }
                        }

                    }
                }
            }
            &-comments{
                // margin-top: 40px;
                margin-bottom: 150px;
                &-item{
                    margin-right: 93px;
                    font-size: 20px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    div{
                        width: 26px;
                        height: 26px;
                        text-align: center;
                        border: 1px solid;
                        margin-right: 10px;
                        position: relative;
                        border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1 4;
                        border-radius: 50%;

                        i{
                            position: absolute;
                            font-size: 40px;
                            background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            left: 0;
                            top: -50%;
                            

                        }

                    }
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
        &-subversion{
            background-image: url('https://static.pdwl.net/jituan/images/digitalMan/icon20.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            height: 940px;
            width: 100%;
            margin: 0 auto 0;
            position: relative;
            &-data{
                &-l{
                    position: absolute;
                    top: 410px;
                    left: 20%;
                    &-title{
                        font-size: 30px;
                        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 35px;
                        letter-spacing: 2px;
                        margin-bottom: 20px;
                    }
                    &-details{
                        font-size: 16px;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #cccccc;
                        line-height: 40px;
                        transition: all .3s;
                        cursor: pointer;
                        i{
                            margin-right: 3px;
                            font-size:22px
                        }
                        &:hover{
                            color: #fff;
                        }
                    }
                }
                &-r{
                    position: absolute;
                    top: 410px;
                    right: 20%;
                    &-title{
                        font-size: 30px;
                        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 35px;
                        letter-spacing: 2px;
                        margin-bottom: 20px;
                        text-align: right;
                    }
                    &-details{
                        font-size: 16px;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #cccccc;
                        line-height: 40px;
                        transition: all .3s;
                        cursor: pointer;
                        i{
                            margin-left: 3px;
                            font-size:22px
                        }
                        &:hover{
                            color: #fff;
                        }
                    }
                }
            }
        }
        &-map{
            width: 70%;
            margin: 0 auto;
            &-data{
                position: relative;
                &-title{
                    padding-top: 57px;
                    &-text{
                        font-size: 32px;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 38px;
                    }
                    div:last-child{
                        width: 70px;
                        height: 6px;
                        margin-top: 30px;
                        background: linear-gradient(311deg, #5F79FF 0%, #71EEFF 100%);
                    }
                }
                &-industry{
                    background: #ffffff1e;
                    border-radius: 20px;
                    padding: 60px 0 0;
                    margin-top: 60px;
                    &-list{
                        width:calc(100% - 400px);
                        &-item{
                            margin-bottom: 60px;
                            text-align: center;
                            cursor: pointer;
                            width: 25%;
                            div{
                                margin: 0 auto;
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                border: 1px solid #ffffffcb;
                                text-align: center;
                                line-height: 80px;
                                font-size: 32px;
                                color: #FFFFFF;
                                i{
                                    font-size: 50px;
                                }
                            }
                            p{
                                font-size: 16px;
                                font-weight: 400;
                                color: #FFFFFF;
                            }
                            &:hover{
                                transform: scale(1.08);
                                div{
                                    border: none;
                                    background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                                }
                            }
                            .industryListActive{
                                border: none;
                                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);

                            }
                        }
                    }
                }
                &-img{
                    width: 300px;
                    height: 532px;
                    position: absolute;
                    top: 0;
                    right: 60px;
                    img{
                        width: 100%;
                        height: 100%;
                        background-size: 100% 100%;
                    }
                }
            }
        }
        &-platform{
            width: 70%;
            margin: 0 auto;
            .head{
                margin-top: 120px;
            }
            &-list{
                &-item{
                    width: 25%;
                    margin-top: 54px;
                    text-align: center;
                    img{
                        width: 200px;
                        height: 76px;
                        background-size: 100% 100%;
                        margin: 0 auto;
                    }

                }
            }
        }
    }
}
</style>
